<template>
  <nav class="side-bar">
    <div class="bar-head">
      <img src="../assets/bar_logo.png" alt="logo">
      <p class="bar-text">能源可视化</p>
    </div>
    <ul>
      <!-- 渲染一级路由 -->
      <li v-for="route in sideBarRoutes" :key="route.path" class="section"
          style="padding-left: 8px;padding-right: 8px;">
        <a href="#" @click.prevent="toggleSection(route)" style="height: 50px" class="mouseup"
           @mousedown.prevent="preventDrag">
          <div>
            <i v-if="route.meta && route.meta.icon" :class="route.meta.icon" style="margin-right: 5px;"></i>
            {{ route.meta.title }}
          </div>
          <span :class="['arrow', {'down': isExpanded(route.path)}]"></span>
        </a>
        <!-- 如果该路由有 children，则递归渲染 -->
        <transition name="expand">
          <ul v-show="isExpanded(route.path)" class="submenu">
            <li
                v-for="child in route.children"
                :key="child.name"
                :class="[{ 'active-item-li': isActive(child.name) },'menu-item']"
                @click="navigateTo(child.name)"
                style="height: 34px;margin: 7px"
                @mousedown.prevent="preventDrag"
            >
              <router-link
                  :to="{ name: child.name }"
                  active-class="active-item"
                  exact
                  style="display: flex; height: 100%; width: 100%; padding: 0 16px;"
              >
                {{ child.meta.title }}
              </router-link>
            </li>
          </ul>
        </transition>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      sideBarRoutes: [],
      expandedSections: this.loadExpandedSections(), // 初始化时加载
      // navItems: []
    }
  },
  created() {
    this.updateSideBarRoutes();
  },
  methods: {
    navigateTo(routeName) {
      if (this.$route.name !== routeName) {
        this.$router.push({name: routeName});
        // this.addNavItem(routeName);
      }
    },
    updateSideBarRoutes() {
      const routes = this.$router.options.routes;
      this.sideBarRoutes = routes.filter(route => route.meta && route.meta.icon);
    },
    toggleSection(route) {
      const path = route.path;
      this.$set(this.expandedSections, path, !this.expandedSections[path]);
      this.saveExpandedSections(); // 状态变化后保存
    },
    isExpanded(path) {
      return this.expandedSections[path];
    },
    isActive(name) {
      return this.$route.name === name;
    },
    // addNavItem(routeName) {
    //   const route = this.$router.options.routes.find(r => r.name === routeName);
    //   if (route) {
    //     this.navItems.push({
    //       title: route.meta.title,
    //       path: route.path
    //     });
    //   }
    // },
    saveExpandedSections() {
      localStorage.setItem('expandedSections', JSON.stringify(this.expandedSections));
    },
    loadExpandedSections() {
      const savedSections = localStorage.getItem('expandedSections');
      return savedSections ? JSON.parse(savedSections) : {};
    },
    preventDrag(event) {
      event.preventDefault();
      event.stopPropagation();
    }
  },
  watch: {
    '$route'() {
      this.updateSideBarRoutes();
    }
  }
}
</script>

<style scoped>
/* 保持原有的样式定义 */
</style>

<style scoped>
.bar-head {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  height: 75px;
  text-align: center;
}

.bar-head img {
  height: 30px;
  width: 30px;
}

.bar-text {
  font-size: 26px;
  margin-left: 5px;
}

.mouseup:hover {
  background-color: #1a1e23;
}

.menu-item:hover {
  border-radius: 5px;
  background-color: #3f9dfe; /* 背景变蓝 */
  transition: background-color 0.3s ease;
  color: white; /* 文字颜色为白色 */
}

.side-bar {
  position: fixed; /* 固定位置 */
  top: 0;
  bottom: 0;
  left: 0;
  width: 256px; /* 根据需要调整宽度 */
  background-color: #21252c; /* 黑色背景 */
  color: white; /* 文字颜色为白色 */
}

.side-bar ul {
  list-style-type: none; /* 移除默认列表样式 */
  padding: 0;
  margin: 0;
}

.side-bar li {
  padding: 8px 16px; /* 内边距 */
}

.side-bar a {
  color: inherit; /* 继承父级的颜色 */
  text-decoration: none; /* 移除下划线 */
  display: flex; /* 使用弹性盒子模型 */
  justify-content: space-between; /* 左右对齐内容 */
  align-items: center; /* 垂直居中 */
  transition: background-color 0.3s ease; /* 添加背景颜色过渡效果 */
  width: 100%; /* 确保链接占据整个列表项的宽度 */
  height: 100%; /* 确保链接占据整个列表项的高度 */
}

/* 箭头样式 */
.arrow {
  transition: transform 0.3s ease-in-out;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid white;
}

.arrow.down {
  transform: rotate(180deg); /* 旋转箭头 */
}

/* 子菜单样式 */
.submenu {
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

/* Expand transition */
.expand-enter-active, .expand-leave-active {
  max-height: 500px; /* 设置足够大的最大高度以容纳所有子项 */
  transition: max-height 0.4s ease-in-out;
}

.expand-enter, .expand-leave-to /* .expand-leave-active for <2.1.8 */
{
  max-height: 0;
}

/* 激活的子菜单项 */
.active-item-li {
  border-radius: 5px;
  background-color: #3f9dfe; /* 背景变蓝 */
  color: white; /* 文字颜色为白色 */
}

/* 激活的子菜单链接 */
.active-item {
  background-color: transparent; /* 确保链接背景透明，让 li 的背景显示出来 */
  color: white; /* 文字颜色为白色 */
}
</style>
